<!-- @format -->

<template>
  <div>
    <p v-if="isShow">姬霓</p>
    <p v-show="isShow">太美</p>
  </div>
</template>

<script>
  /**
   *  v-if和v-show的区别总结：
   *  1. 相同点：
   *  (1) 二者都可以控制元素的显示或隐藏，视觉效果一样
   *  (2) 表达式为true，元素显示；否则隐藏
   *  2. 不同点：
   *  控制元素显示或隐藏的原理不同，
   *  (1) v-if是通过创建和插入或移除DOM元素实现元素显示或隐藏的
   *  (2) v-show是通过控制DOM元素display属性控制的
   *
   *  怎么选择：
   *   频繁切换显示和隐藏用v-show，不频繁用v-if
   *   因为v-if会让元素从DOM树上创建或移除，有更多的开销性能
   *
   */
  export default {
    data() {
      return {
        isShow: true
      }
    }
  }
</script>

<style></style>
